<template>
  <el-card class="activityHome">
    <!--活动日历-->
    <div class="calendar">
      <span>活动日历</span>
      <el-calendar v-model="date"></el-calendar>
    </div>

    <div class="activity-card">
      <div class="activity-main">
        <!--活动轮播图，也是快速入口-->
          <el-carousel height="234px" class="activity-carousel">
            <el-carousel-item v-for="item in activityList.slice(0,5)" :key="item.activityId">
              <router-link to="to" @click="getActivityDetails(item.activityId)">
                <el-image class="activity-carousel-banner" :src="getDownloadUrl(item.cover)"></el-image>
              </router-link>
            </el-carousel-item>
          </el-carousel>
        <el-card class="activity-main-body" v-for="item in activityList" :key="item.activityId">
          <!--主题和正文部分-->
          <div class="comment">
            <el-icon icon="Edit"></el-icon>
          </div>
          <router-link to="to">
            <div class="activity-desc">
              <span class="activity-title">{{item.topic}}</span>
              <span class="activity-text">{{item.text}}</span>
              <span class="activity-beforeTime">{{getReleaseTime(item.releaseTime)}}</span>
            </div>
            <div>
              <el-image class="activity-cover" :src="getDownloadUrl(item.cover)"></el-image>
            </div>
          </router-link>
        </el-card>
      </div>
      <div class="activity-tab">
        <el-card class="user-select">
          <div class="user-select-title">活动</div>
          <div v-if="isManager" class="user-select-menu">
            <el-button class="user-select-menu-btn" icon="Edit" @click="getActivityList">发布活动</el-button>
            <p>线上互动、线下活动、文化展会</p>
          </div>
          <div class="user-select-menu">
            <el-button class="user-select-menu-btn" icon="Search" @click="getActivityList">搜索活动</el-button>
            <p>线上互动、线下活动、文化展会</p>
          </div>
        </el-card>
      </div>
    </div>
  </el-card>
</template>

<script>
import { queryActivityList } from '@/services/index/activity/activity'
import { downloadUrl } from '@/script/util'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'ActivityHome',
  data () {
    return {
      isManager: false,
      date: new Date(),
      activity: {},
      importantActivityList: [],
      activityList: []
    }
  },
  methods: {
    getActivityList () {
      const formData = {
        page: 1,
        pageSize: 10
      }
      const data = JSON.stringify(formData)
      return queryActivityList(data).then((res) => {
        this.activityList = res.data.responseBody
      })
    },
    getReleaseTime (time) {
      return time
    },
    getActivityDetails () {

    },
    getDownloadUrl (url) {
      return downloadUrl + url
    }
  },
  created () {
    this.getActivityList()
  }
}
</script>

<style scoped lang="less">
@import "activityHome.less";
</style>
